.login-containers{
    width: 100%;
    height: 100%;
    background-image: url(../../static/images/hero-bg.jpg);
    background-size: cover;
    z-index: 2;
    .login-content{
        width: 1000px;
        height: 100%;
        margin: 0 auto;
        overflow: hidden;
        .main-menu{
            background: rgba(255, 255, 255, 0.15);
            width: 1000px;
            height: 70px;
            margin-top: 40px;
            h2{
                float: left;
                height: 70px;
                i{
                    width: 40px;
                    height: 40px;
                    background-image: url(../../static/images/lu.jpg);
                    border-radius: 50%;
                    margin: 15px 20px 0 10px;
                    float: left;
                }
                b{
                    color: white;
                    float: left;
                    height: 70px;
                    font-size: 20px;
                    line-height: 70px;
                    overflow: hidden;
                    width: 9em;
                    white-space: nowrap;
                }
            }
            ul{
                float: right;
                display: flex;
                height: 100%;
                li{
                    padding: 0 8px;
                    margin-right: 20px;
                    .icon{
                        color: white;
                        font-size: 40px;
                        line-height: 70px;
                    }
                }
            }
        }
    }
}
.main-content{
    width: 1000px;
    height: 100%;
    .main-content-left{
        float: left;
        margin-top: 300px;
        width: 580px;
        h6{
            font-weight: 600;
            font-size: 14px;
            letter-spacing: 2px;
            color: white;
            text-transform: uppercase;
        }
        h1{
            margin: 20px 0;
            color: white;
            font-size: 60px;
            text-transform: uppercase;
        }
        p{
            margin: 20px 0;
            color: white;
            font-size: 14px;
            font-weight: 300;
            box-sizing: border-box;
            line-height: 30px;
            letter-spacing: 2px;
        }
        a{
            text-decoration: none;
            background-color: #f8b600;
            transition: background-color 0.5s;
            color: white;
            line-height: 42px;
            display: inline-block;
            padding: 0 30px;
            border: none;
            font-weight: 500;
            cursor: pointer;
        }
        a:hover{
            transition: background-color 0.5s;
            background-color: #222;
        }
    }
    .main-content-right{
        float: right;
        margin-top: 200px;
        h3{
            button{
                text-transform: uppercase;
                font-weight: 600;
                font-size: 13px;
                margin-right: 1px;
                border: none;
                padding: 16px 16px;
                outline: none;
            }
            .btn{
                background: rgba(255, 255, 255, 0.25);
                color: #fff;
            }
            .btn-choose{
                color: #495057;
                background-color: #fff;
            }
        }
        form{
            padding: 40px 30px;
            background: #fff;
            overflow: hidden;
            input{
                display: block;
                width: 90%;
                margin-bottom: 20px;
                color: #495057;
                background-color: #fff;
                border: 1px solid #ced4da;
                font-size: 13px;
                overflow: visible;
                padding: 10px 12px;
            }
            .login-btn{
                background: #f8b600;
                line-height: 35px;
                padding: 0 30px;
                border: none;
                color: #fff;
                display: inline-block;
                font-size: 14px;
                font-weight: 500;
                width: 90%;
                cursor: pointer;
                margin-left: 5%;
                border-radius: 5px;
                outline: none;
            }
            .register-btn{
                background: #f8b600;
                line-height: 35px;
                padding: 0 30px;
                border: none;
                color: #fff;
                display: inline-block;
                font-size: 14px;
                font-weight: 500;
                width: 90%;
                cursor: pointer;
                margin-left: 5%;
                border-radius: 5px;
                outline: none;
            }
        }
    }
}

@keyframes upDown {
    0% {transform: translateY(1000px)}
    25% {transform: translateY(0)}
    50% {transform: translateY(200px)}
    75% {transform: translateY(0)}
    85% {transform: translateY(30px)}
	100% {transform: translateY(0)}
}
@keyframes rightTopIn {
    from {
        transform: translate3d(2000px, -1000px ,200px);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0 ,0);
        opacity: 1;
    }
}
@keyframes leftTopIn {
    from {
        transform: translate3d(-1000px, -1000px ,200px);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0 ,0);
        opacity: 1;
    }
}
@keyframes leftBottomIn {
    from {
        transform: translate3d(-1000px, 1000px ,200px);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0 ,0);
        opacity: 1;
    }
}
@keyframes rightBottomIn {
    from {
        transform: translate3d(2000px, 1000px ,200px);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0 ,0);
        opacity: 1;
    }
}
@keyframes loadText {
    from {
        width: 0;
    }
    to {
        width: 9em;
    }
}